/**
 * Created by tang on 2018/3/27.
 */
import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button, Input, Popconfirm, message, Divider, Dropdown, Menu, Tabs } from 'antd';
import AvatarList from '../../components/AvatarList';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow';
import TagSelect from '../../components/TagSelect';
import styles from './Banner.less';
//import { btnPermission, havePermission } from '../../method/globle';
import { checks } from '../../utils/authority';

const { Option } = Select;
//const FormItem = Form.Item;

const pageSize = 5;
const { Meta } = Card;
@Form.create()
@connect(state => ({
  banner: state.banner
}))
export default class Banner extends Component {
  componentDidMount() {
    this.fetchMore();
  }


  //删除
  handleDelete(id) {
    const { dispatch } = this.props;
    dispatch({
      type: 'banner/remove',
      payload: {id: id}
    });
  }
  //取消删除
  cancel(){
    message.error('您取消了删除!');
  }

  handleModalVisible = () => {
  };

  fetchMore = () => {
    this.props.dispatch({
      type: 'banner/fetch',
      payload: {
        count: pageSize
      }
    });
  };

  onShowSizeChange(page, pageSize){
    this.props.dispatch({
      type: 'banner/save',
      payload: {page: page, pageSize: pageSize}
    });
    this.props.dispatch({
      type: 'banner/fetch',
    });
  }
  onChangePage(page, pageSize){
    this.props.dispatch({
      type: 'banner/save',
      payload: {page: page, pageSize: pageSize}
    });
    this.props.dispatch({
      type: 'banner/fetch',
    });
  }
  callback(key) {
    //console.log(key)
    this.props.dispatch({
      type:'banner/save',
      payload:{imgType:key}
    });
    this.props.dispatch({
      type: 'banner/fetch',
      payload: {
        count: pageSize
      }
    });

  }


  render() {
    const TabPane = Tabs.TabPane;
    const { form, banner: { dataList, loading, total, pageSize,page,url} } = this.props;
    //const { getFieldDecorator } = form;
    //console.log(dataList);
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );


    const ListContent = ({ data: { content } }) => (
      <div className={styles.listContent}>
        <div className={styles.description}>{content}</div>
      </div>
    );


    //分页
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: this.onShowSizeChange.bind(this),
      onChange: this.onChangePage.bind(this),
      pageSizeOptions: ['10', '20', '30', '40'],
      pageSize: pageSize,
      total: total,
      current: page,
    };

    var addBtn = [];
    if (checks('/admin/carousel/add')){
      addBtn.push(
        <div key = 'add' className={styles.tableListOperator}>
          <Link to={{pathname:"/system/bannerAdd"}}><Button>新建</Button></Link>
        </div>
      );
    }

    return (
      <PageHeaderLayout
        title="轮播图列表"
      >
        <div>

          <Card
            style={{ marginTop: 24 }}
            bordered={false}
            bodyStyle={{ padding: '8px 32px 32px 32px' }}
          >
            <div className={styles.description}>
              {addBtn}
            </div>
            <List
              rowKey="id"
              loading={loading}
              pagination={paginationProps}
              grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
              dataSource={dataList}
              renderItem={item => {
                //console.log(item,">>>item");
                var actions = [];
                if (checks("/admin/carousel/update")){
                  actions.push(
                    <Link key="edit" to={{pathname: "/system/bannerAdd", search: '?id=' + item.id}}>编辑</Link>
                  )
                }
                if(checks("/admin/carousel/info")){
                  actions.push(
                    <Link key="edit-1" to={{pathname: "/system/bannerInfo", search: '?id=' + item.id}}>详情</Link>
                  )
                }
                if (checks("/admin/carousel/del")){
                  actions.push(
                    <Popconfirm key='delete' title="你确定要删除吗?" onConfirm={() => this.handleDelete(item.id)} onCancel={this.cancel}>
                      <a href="#">删除</a>
                    </Popconfirm>
                  )
                }

                return(
                  <List.Item>
                    <Card
                      className={styles.card}
                      hoverable
                      cover={<img alt={item.title} src={item.img} height={154} />}
                      actions={actions}
                    >

                    </Card>
                  </List.Item>
                  )
                  }
                }
            />


          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}
